<template>
    <div class="div">
        <div class="left">
            <span class="left_icon iconfont">&#xe624;</span>
        </div>
        <div class="content">
            <span class="cpntent_place">
                请输入名称或地址
            </span>
        </div>
        <router-link to="/city" tag="div" class="right" >
            <span class="right_span">{{this.city}}</span>
            <span class="right_icon iconfont">&#xe62d;</span>
        </router-link>
        
    </div>
</template>

<script>
import {mapState} from "vuex"
export default {
    data() {
        return {

        };
    },
    props:{
        city:String
    },
    created() {

    },
    mounted() {

    },
    methods: {

    },
    computed:{
        ...mapState(['city'])
    }
};
</script>

<style lang="stylus"  scoped>
// import   '~styles/mixins.styl'
    .div
        height :0.86rem
        background :red
        width :100%
        display :flex
        align-items :center
        .left
            width :15%
            height 100%
            .left_icon
              font-size :0.7rem
              line-height :0.9rem  
        .content
            flex :1
            height 90%
            background :#fff
            text-align :center
            line-height :0.7rem     
        .right
            min-width :15%
            height 100%
            display :flex
            align-items :center
            justify-content :center
            // line-height :0.48rem
            .right_span
                font-size :0.32rem
            .right_icon
                font-size :0.24rem

            
</style>
